<template>
   <div id="d3ChartsBox" class="D3Charts-box text-left">
       <div class="page-sub-header text-left">
           <h1>D3Charts</h1>
       </div>
       <div class="d3-charts">
           <a href="#d3ChartBarWrapper">柱状图</a>
           <a href="#d3ChartLineWrapper">折线图</a>
           <a href="#d3ChartLineMultiWrapper">多条折线图</a>
           <a href="#d3ChartStackedAreaWrapper">堆叠区域图</a>
           <a href="#d3ChartNormalDistributionWrapper">正太分布图</a>
           <a href="#d3ChartScatterWrapper">散点图</a>
           <a href="#d3ChartBoxPlotWrapper">箱线图（原始数据）</a>
           <a href="#d3ChartResultBoxPlotWrapper">箱线图（结果数据）</a>
           <a href="#d3ChartViolinPlotWrapper">小提琴图</a>
           <a href="#d3ChartHistogramWrapper">直方图（原始数据）</a>
           <a href="#d3ChartResultHistogramWrapper">直方图（结果数据）</a>
           <a href="#d3ChartPieWrapper">饼图</a>
           <a href="#d3ChartPie3DWrapper">3D饼图</a>
       </div>
       <div class="app-page-body">
           <div class="app-page-container">
               <div id="d3ChartBarWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">柱状图</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartBar"></div>
               </div>
               <div id="d3ChartLineWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">折线图</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartLine"></div>
               </div>
               <div id="d3ChartLineMultiWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">多条折线图</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartLineMulti"></div>
               </div>
               <div id="d3ChartStackedAreaWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">堆叠区域图</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartStackedArea"></div>
               </div>
               <div id="d3ChartNormalDistributionWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">正太分布图</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartNormalDistribution"></div>
               </div>
                <div id="d3ChartScatterWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">散点图</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartScatter"></div>
               </div>
                <div id="d3ChartBoxPlotWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">箱线图（原始数据）</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartBoxPlot"></div>
               </div>
                <div id="d3ChartResultBoxPlotWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">箱线图（结果数据）</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartResultBoxPlot"></div>
               </div>
                <div id="d3ChartViolinPlotWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">小提琴图</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartViolinPlot"></div>
               </div>
                <div id="d3ChartHistogramWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">直方图（原始数据）</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartHistogram"></div>
               </div>
                <div id="d3ChartResultHistogramWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">直方图（结果数据）</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartResultHistogram"></div>
               </div>
                <div id="d3ChartPieWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">饼图</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartPie"></div>
               </div>
                <div id="d3ChartPie3DWrapper" class="d3-chart-wrapper">
                    <div>
                        <h2 class="d-inline-block">3D饼图</h2>
                        <a href="#d3ChartsBox" class="d-inline-block gap-10">返回顶部</a>
                    </div>
                    <div class="d3-chart" id="d3ChartPie3D"></div>
               </div>
           </div>
       </div>
   </div>
</template>

<script src="./index.js"></script>

<style scoped lang="scss">
   @import "../../style/boxplot.css";
   @import "../../style/scatter.css";
   @import "./default.sass";
</style>
